import React, { Component } from 'react';
import { Sliderdiv } from './style'
import connect from './connect'


class slider extends Component {

    state = {
        selected: 0,
        selectArr: []
    }

  

    btn(index) {
        this.setState({
            selected: index,
            selectArr: this.props.category[index].data
        })

    }

    static getDerivedStateFromProps(props, state) { 
        return props.category[0] ? props.category[0]['data'] : null          //为了使其在一挂载就显示
            

    }

    render() {
        console.log(this.state.selectArr)
        console.log(this.props.category)
        console.log(this.props.material)
        return (
            <Sliderdiv>
                <div>
                    <ul>
                        {   
                            this.props.category.map((item, index) => {
                                return (
                                    this.state.selected === index
                                        ?
                                        <li className="active" key={index} onClick={() => { this.btn(index) }}><span>{item.name}</span></li>
                                        :
                                        <li key={index} onClick={() => { this.btn(index) }}><span>{item.name}</span></li>
                                )
                            })
                           
                            
                        }
                    </ul>
                </div>
                <div>
                    <ul>
                        {
                            this.state.selectArr.map((item, index) => {
                                return (
                                    <li><span key={index}>{item}</span></li>
                                )
                            })


                        }

                    </ul>
                </div>
            </Sliderdiv>
        );
    }

}

export default connect(slider);
